{extend name="public/common"}

{block name="style"}
<title>公司简讯</title>
<link rel="stylesheet" href="/home/css/news/index.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="list" infinite-scroll-immediate-check =false v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <ul>
            <li @click="toDetail(item.id)" v-for="item in list">
                <img src="/home/images/news/type-1.png" class="tag" v-if="item.type == 1"/>
                <img src="/home/images/news/type-2.png" class="tag" v-else/>
                <span>{{item.type_text}}</span>
                <p class="title">{{item.title}}</p>
                <div class="content">
                    <span class="department">{{item.publisher}}</span>
                    <span class="view">{{item.views}}</span>
                    <span class="time">{{item.create_time | timeToString('ymd')}}</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="loading-more" v-if="list.length >= 8">
        <div v-if="loadOver && list.length >= 8">没有更多了</div>
        <div v-else  v-show="loading" >
            <mt-spinner :type="3" color="#999"></mt-spinner>
            正在加载中...
        </div>
    </div>
    <div class="empty" v-if="len == 0">
        <img class="empty-img" src="/home/images/common/empty.png" alt="">
        <p class="empty-title">暂无内容，敬请期待</p>
        <p class="empty-text">to be continued...</p>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$list})
    var vm = new Vue({
        el:'#app',
        data:{
            list: {$list},
            loading: false,
            loadOver: true,
            len: {$list}.length
        },
        methods:{
            loadMore: function () {
                var _this = this;
                if(_this.len < 8){
                    return false
                }
                _this.loading = true;
                _this.loadOver = false;
                _this.$http.post('{:Url("News/index")}', {
                    'length': _this.len
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    console.log(data)
                    if(data.code == 1){
                        if (data.data.length == 8) {
                            _this.loading = false;
                        } else {
                            _this.loadOver = true;
                        }
                        for(var i in data.data){
                            _this.list.push(data.data[i]);
                        }
                        _this.len = _this.list.length;
                    }else{
                        _this.loadOver = true;
                    }
                }, function () {
                    _this.$toast({message:'加载失败，请重试',duration:1500});
                    _this.loadOver = true;
                })
            },
            toDetail: function(id){
                window.location.href = '/home/news/detail/id/'+id+'.html'
            }
        }
    })
</script>
{/block}
